<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="Generator" content="xnr®">
    <meta name="Author" content="小男人-923227829@qq.com">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>员工列表</title>
    <link rel="stylesheet" href="../../inc/layui/css/layui.css">
    <link rel="stylesheet" href="../../css/comm.css">
    <style>
        .tabBtn {
            background-color: #FFF;
            border: 1px solid #DB0007;
            color: #DB0007;
        }

        .tabBtn:hover {
            border: 1px solid #DB0007;
            background-color: #DB0007;
            color: #FFFFFF;
        }
    </style>
</head>

<body>

<div class="layui-form" id="search-form">
    <div class="flex">
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto">姓名</label>
            <div class="layui-input-inline">
                <input class="layui-input " name="staffName" id="staffName" autocomplete="off" placeholder="姓名"
                       lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto">角色</label>
            <div class="layui-input-inline">
                <select id="role" name="roleId" lay-filter="roleId">

                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <button class="layui-btn" onclick="search()" style="margin-left: 20px">搜索</button>
            <!--<button class="layui-btn" onclick="resetForm()" style="margin-left: 20px">重置</button>-->
            <button class="layui-btn" onclick="reference()" style="margin-left: 20px">刷新</button>
        </div>

    </div>
</div>

<table class="layui-hide" id="table" lay-filter="table"></table>


</body>

<script type="text/html" id="formTpl">

    <div id="form" class="layui-form" style="margin-top: 20px;margin-right:30px;">
        <input type="hidden" name="customerId" value="-1">
        <div class="layui-form-item layui-hide" id="roleDiv">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-block">
                <select id="roleId" name="roleId" lay-filter="roleId" disabled="enabled">

                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">员工姓名</label>
            <div class="layui-input-block">
                <input value="" type="text" name="customerName" lay-verify="required" id="customerName" readonly="true"
                       autocomplete="off" placeholder="员工姓名" class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item" id="a3">
            <label class="layui-form-label">员工密码</label>
            <div class="layui-input-block">
                <input value="" type="text" name="password" lay-verify="required" id="password" readonly="true"
                       autocomplete="off" placeholder="员工密码" class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">联系方式</label>
            <div class="layui-input-block">
                <input value="" type="text" name="phone" lay-verify="required" id="phone" readonly="true"
                       onkeyup="this.value=this.value.replace(/[^0-9_]/g,'');"
                       maxLength="11" autocomplete="off"
                       placeholder="员工联系方式" class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item flex_center">
            <div class="fr">
                <button class="layui-btn layui-btn-danger" lay-submit="" lay-filter="sub" id="save">保存</button>
                <button class="layui-btn layui-btn-primary" onclick="layer.closeAll();">取消</button>
            </div>
        </div>
    </div>
</script>

<script type="text/html" id="renderSelect">
    <option value=''>请选择</option>
    {{# layui.each(d, function(index, item){ }}
    <option value='{{item.roleId}}'>{{item.name}}</option>
    {{# }); }}
</script>
<script type="text/javascript" src="../../inc/layui/layui.js"></script>
<script type="text/javascript" src="../../inc/g.js"></script>
<script type="text/javascript">

    var role = [];

    function pageload(conditions) {
        AJAX.GET("/admin/role/query", function (a) {
            if (a.code != 1) {
                Comm.msg("加载角色失败;")
            }
            role = a.data;
        }, false);
        initSelect("#role");
        renderTable(conditions);
        Comm.form.render("select");
        //初始化列表

        Comm.table.on('tool(table)', function (obj) {
            if (obj.event == 'detail') { //修改关键字
            }
        });
    }

    //刷新
    function reference() {
        Comm.table.reload('table');
    }

    //重置
    function resetForm() {
        $("#phone").val("");
        $("#customerName").val("");
        $("#role").val("");
        Comm.form.render("select");
        Comm.form.render();
        //pageload(null)
    }

    //详情
    function details() {
        addOrUpd("details");
    }

    //修改
    function update() {
        addOrUpd('upd');
    }

    //新增
    function add() {
        addOrUpd('add');
    }

    //禁用
    function disable() {
        setEnable("禁用", 0);
    }

    //启用
    function enable() {
        setEnable("启用", 1);
    }

    //删除
    function del() {
        delStaff();
    }

    //搜索
    function search() {
        /*  var con = Comm.GetData('search-form');

          pageload(JSON.stringify(con));*/
        Comm.search(null, false);
    }

    function setEnable(str, enable) {
        var d = Comm.table.checkStatus('table'); //获取选中的数据
        if (d.data.length < 1) {
            Comm.msg("请选择至少一条数据", 5)
            return;
        }
        var ids = [];
        for (var i = 0; i < d.data.length; i++) {
            ids.push(d.data[i].customerId);
        }

        Comm.confirm("确认" + str + "已选择员工?", function () {
            AJAX.POST("/admin/customer/staff/setEnable", {customerIds: ids.join(","), enable: enable}, function (d) {
                if (d.code == 1) {
                    Comm.layer.closeAll();
                    Comm.msg(str + "成功", 1);
                    Comm.table.reload("table");
                } else {
                    Comm.layer.closeAll();
                    Comm.msg(str + "失败", 5);
                }
            });
        })

    }

    function delStaff() {
        var d = Comm.table.checkStatus('table'); //获取选中的数据
        if (d.data.length < 1) {
            Comm.msg("请选择至少一条数据", 5)
            return;
        }
        var ids = [];
        for (var i = 0; i < d.data.length; i++) {
            ids.push(d.data[i].customerId);
        }
        Comm.confirm("确认删除已选择员工?", function () {
            AJAX.POST("/admin/customer/staff/del", {customerIds: ids.join(",")}, function (d) {
                if (d.code == 1) {
                    Comm.layer.closeAll();
                    Comm.msg("删除成功", 1);
                    Comm.table.reload("table");
                } else {
                    Comm.layer.closeAll();
                    Comm.msg("删除失败", 5);
                }
            });
        })

    }

    function addOrUpd(type) {
        var d = Comm.table.checkStatus('table'); //获取选中的数据
        var title = ""
        var url = "";
        if (type == 'add') {
            title = "新增员工"
            url = "/admin/customer/staff/add"
        }
        if (type == 'upd') {
            if (d.data.length != 1) {
                Comm.msg("请选择一条数据", 5)
                return;
            }
            url = "/admin/customer/staff/update"
            title = "修改员工"
        }
        if (type == 'details') {
            if (d.data.length != 1) {
                Comm.msg("请选择一条数据", 5)
                return;
            }
            title = "员工详情"
        }
        Comm.laytpl($("#formTpl").html()).render(d, function (html) {
            layer.open({
                type: 1,
                title: title,
                area: ['400px', '400px'],
                maxmin: true,
                content: html,
                success: function (layero) {
                    initSelect("#roleId");

                    if (d.data && d.data.length > 0 && type != "add") {
                        Comm.SetData(d.data[0], 'form');
                        $("#roleId").val(d.data[0].roleId);
                    }
                    if (type == 'add') {
                        $("#roleDiv").removeClass("layui-hide");
                        $("#roleId").removeAttr("disabled");
                        $("#customerName").removeAttr("readonly");
                        $("#password").removeAttr("readonly");
                        $("#phone").removeAttr("readonly");
                        Comm.form.render('select');
                    }
                    if (type == 'upd') {
                        //$("#roleId").removeAttr("disabled");
                        $("#password").removeAttr("readonly");
                        $("#password").removeAttr("lay-verify");
                        $("#password").val("");
                        $("#customerName").removeAttr("readonly");
                        $("#phone").removeAttr("readonly");
                        Comm.form.render('select');
                    }
                    if (type == 'details') {
                        $("#a3").remove();
                        $("#a1").removeClass("layui-hide");
                        $("#a2").removeClass("layui-hide");
                        $("#save").remove()
                    }


                    Comm.form.render();
                    Comm.form.on('submit(sub)', function (data) {
                        if (!data.field.roleId && type != 'upd') {
                            Comm.msg("请选择角色", 5);
                            return;
                        } 
                        if (!data.field.password) {
                            Comm.msg("请输入密码", 5);
                            return;
                        }
                        AJAX.POST(url, data.field, function (d) {
                            if (d.code == 1) {
                                Comm.layer.closeAll();
                                Comm.msg(d.msg, 1);
                                Comm.table.reload("table");
                            } else {
                                Comm.layer.closeAll();
                                Comm.msg(d.msg, 5);
                            }
                        },true,true)
                    });
                }
            });
        });
    }

    function initSelect(rolet) {
        Comm.laytpl($("#renderSelect").html()).render(role, function (html) {
            $(rolet).html(html);
            Comm.form.render('select');
        });
    }

    function renderTable(conditions) {
        Comm.table.render({
            elem: '#table',
            url: config.root + '/admin/customer/staff/list', //列表请求接口
            where: { //接口参数d
                conditions: conditions
            },
            cols: [
                [
                    //是否可选
                    {
                        checkbox: true
                    }, {
                    field: 'customerName',
                    title: '员工姓名'
                }, {
                    field: 'phone',
                    title: '联系方式'
                }
                    , {
                    field: 'roleName',
                    title: '角色'
                }, {
                    field: 'addTime',
                    title: '添加时间',
                    templet: function(d) {
                    return Comm.format(d.addTime);
                    }
                },
                    {
                        field: 'status',
                        title: '状态',
                        templet: function (d) {
                            var data = "";
                            if (d.status == 0) {
                                data = "<span style='color: #aa1111'>已禁用</span>";
                            } else {
                                data = "<span style='color: #28a102'>已启用</span>";
                            }
                            return data;
                        }
                    },
                ]
            ],
            limit: 10, //分页大小
            id: 'table',
            page: true, //是否分页
        });
    }
</script>

</html>